<template>
  <el-aside width="200px">
    <div class="logo">黑马面经</div>
    <el-menu
      :default-active="activePath"
      class="el-menu-vertical-demo"
      background-color="#313a46"
      text-color="#8391a2"
      active-text-color="#fff"
      router
    >
      <el-menu-item index="/dashboard">
        <i class="el-icon-pie-chart"></i>
        <span slot="title">数据看板</span>
      </el-menu-item>
      <el-menu-item index="/article">
        <i class="el-icon-notebook-1"></i>
        <span slot="title">面经管理</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'AsideView',
  data () {
    return {
      activePath: '/dashboard'
    }
  },
  methods: {},
  created () {
    this.activePath = this.$route.path
  }
}
</script>

<style lang="less" scoped>
.el-aside {
  background: #313a46;
  .logo {
    line-height: 60px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }
  .el-menu {
    border-right: none;
    .el-menu-item {
      background: transparent !important;
    }
    i {
      padding-left: 5px;
    }
    span {
      padding-left: 5px;
    }
  }
}
</style>
